<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>标签管理</el-breadcrumb-item>
      <el-breadcrumb-item>修改标签</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 提示区 -->
      <el-alert
          title="修改标签信息"
          type="info"
          center
          show-icon
          :closable="false"
      >
      </el-alert>
      <!-- 进度条 为让steps和tab-pane实现一一对应联动，都绑定上了activeIndex，但steps这里要的是数字类型，所以最简单来-0处理-->
      <el-steps
          :space="200"
          :active="activeIndex - 0"
          finish-status="success"
          align-center
      >
        <el-step title="标签名字"></el-step>
        <el-step title="标签类型"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
      <!-- label-position-top让标签在输入框上面 -->
      <el-form
          :model="addLabelForm"
          status-icon
          :rules="addFormRules"
          ref="addLabelFormRef"
          label-width="100px"
          label-position="top"
      >
        <!-- v-model绑定的是被激活的tab-pane的name属性 tab-pane被激活的name更新给activeIndex,activeIndex又更新给steps,实现联动-->
        <!-- 只不过tab-pane的name值期望是字符串类型，但el-steps的active想要的是数值类型，所以el-steps在取值时要转换下类型 -->
        <el-tabs
            tab-position="left"
            style="height: auto"
            v-model="activeIndex"
        >
          <!-- el-tab-pane只允许做el-tabs的子节点,所以form表单得在外面-->
          <el-tab-pane label="基本信息" name="0">
            <el-form-item label="标签名字" prop="label_name">
              <el-input v-model="addLabelForm.label_name"></el-input>
            </el-form-item>
            <el-form-item label="标签类型" prop="label_type" >
              <el-radio-group v-model="addLabelForm.label_type" disabled>
                <el-radio v-for="item in addLabelForm.label_cat" :label="item">
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-tab-pane>
          <el-form-item>
            <el-button type="primary" @click="addLabelInfo('addLabelForm')">确认修改</el-button>
            <el-button @click="resetForm()">重置</el-button>
          </el-form-item>
        </el-tabs>
      </el-form>
    </el-card>
  </div>
</template>

<script>
// 借助lodash的深拷贝，因为本地中商品所属分类的数据是一个数组，为了迎合级联选择器；但是提交添加请求前得把数据转为字符串类型去迎合服务器。如果直接把转完的结果赋给本身可能级联选择器的数据绑定那会报错（现在新版的可能是官方取消了这个数据绑定的类型），深拷贝出一个商品信息对象，操作拷贝对象而对原数据无影响
export default {
  data() {
    return {
      // 进度条的当前索引
      activeIndex: '0',

      // 添加商品的表单数据对象
      addLabelForm: {
        label_name:'',
        // 从级联选择器中选择的商品所属分类的数据
        label_type:'',
        label_cat:['基本信息','业务信息','症状信息'],
      },
      basic:{
        id:"",
        basicinfo:""
      },
      operation:{
        id:"",
        operation:""
      },
      symptom:{
        id:"",
        "symptom": ""
      },

      // 添加表单中的验证规则对象
      addFormRules: {
        label_name: [
          { required: true, message: '标签名字不能为空！', trigger: 'blur' },
        ],
        label_type: [
          { required: true, message: '标签类型不能为空！', trigger: 'blur' },
        ],
      },
    }
  },
  created() {
    console.log(this.editLabelID.id)
    if(this.editLabelType.type == "基本信息"){
      this.getRequest('/basic/byid/?id='+this.editLabelID.id).then(resp=>{
        console.log(resp)
        this.addLabelForm.label_name = resp[0].basicinfo
      });
    }
    if(this.editLabelType.type == "业务信息"){
      this.getRequest('/operation/byid/?id='+this.editLabelID.id).then(resp=>{
        console.log(resp)
        this.addLabelForm.label_name = resp[0].operation
      });
    }
    if(this.editLabelType.type == "症状信息"){
      this.getRequest('/symptom/byid/?id='+this.editLabelID.id).then(resp=>{
        console.log(resp)
        this.addLabelForm.label_name = resp[0].symptom
      });
    }
    if(this.editLabelType.type){
      this.addLabelForm.label_type = this.editLabelType.type;
    }
  },
  methods: {
    // 点击添加商品按钮
    addLabelInfo() {
      this.$refs.addLabelFormRef.validate((valid) => {
        if (!valid) {
          return this.$message.error('有必要的表单项没有填写！')
        } else {
          if(this.addLabelForm.label_type === "基本信息"){
            this.basic.basicinfo = this.addLabelForm.label_name;
            this.basic.id = this.editLabelID.id
            this.putRequest('/basic/',this.basic).then(resp=>{
              if(resp){
                this.$router.push('/label/basicInfo')
              }else{
                this.$router.push('/home')
              }
            })
          }
          if(this.addLabelForm.label_type === "业务信息"){
            this.operation.operation = this.addLabelForm.label_name;
            this.operation.id = this.editLabelID.id
            this.putRequest('/operation/',this.operation).then(resp=>{
              if(resp){
                this.$router.push('/label/operationInfo')
              }else{
                this.$router.push('/home')
              }
            })
          }
          if(this.addLabelForm.label_type === "症状信息"){
            this.symptom.symptom = this.addLabelForm.label_name
            this.symptom.id = this.editLabelID.id
            this.putRequest('/symptom/',this.symptom).then(resp=>{
              if(resp){
                this.$router.push('/label/symptom')
              }else{
                this.$router.push('/home')
              }
            })
          }
        }
      })
    },
    resetForm() {
      this.addLabelForm.label_name = "";
      this.addLabelForm.label_type = "";
    },
  },
}
</script>

<style lang="less" scoped>
.el-steps {
  margin: 15px 0;
}
.el-checkbox {
  margin: 0 10px 0 0 !important;
}
.previewImg {
  width: 100%;
}
.btnAddGoods {
  margin-top: 15px;
}
</style>